<script lang="ts" setup></script>
<template>
  <div class="footer" id="footer">
    <div class="footerContent">
      <div class="top">
        <div class="imgBox">
          <img src="/index/flog.png" alt="footer" />
        </div>
        <div class="item">
          <h3>能提供什么服务</h3>
          <p>专业的运维软件</p>
          <p>专业的运维建议</p>
          <p>专业运维服务跟踪</p>
          <p>一站式等保解决方案</p>
        </div>
        <div class="item">
          <h3>常用文档</h3>
          <p>宝塔使用手册</p>
          <p>Linux面板命令</p>
          <p>API接口文档</p>
          <p>宝塔开源协议</p>
        </div>
        <div class="item">
          <h3>快捷入口</h3>
          <p>公司简介</p>
          <p>开发者中心</p>
          <p>漏洞提交</p>
          <p>GitHub</p>
        </div>
        <div class="item flex flex-col items-start"
          style="max-width: none; width: fit-content; flex-shrink: 0; min-width: 280px;">
          <h3>联系我们</h3>
          <p class="showQr">
            客服咨询： 查看二维码
            <img src="/index/qr.jpg" alt="qr" />
          </p>
          <p>商务合作QQ/WX：111111111（简述合作方向内容）</p>
          <p>电话（非客服）：0516-12345612</p>
          <p>周一至周六 9:15~12:30 14:00~18:15（节假日除外）</p>
          <p>宝塔面板交流QQ群：111111111</p>
        </div>
        <div class="qr">
          <img src="/index/qr.jpg" alt="qr" />
          <p>微信公众号</p>
        </div>
      </div>
      <div class="bot">
        <div class="links">
          <a href="#" target="_blank">《开源许可协议》</a>
          <i>丨</i>
          <a href="#" target="_blank">《用户协议》</a>
          <i>丨</i>
          <a href="#" target="_blank">《隐私声明》</a>
          <i>|</i>
          <a href="#">
            <img src="/index/real.png" alt="" />
          </a>
        </div>
        <div class="group">
          <p class="copyright">
            高新技术企业编号GR201944000059 |
            <a href="https://tsm.miit.gov.cn/" target="_blank">粤B2-20201398</a>
            |
            <a href="http://beian.miit.gov.cn" target="_blank">
              粤ICP备17030143号
            </a>
            |
            <a href="#" target="_blank">粤公网安备44190002003211号</a>
          </p>
          <p class="copyright">
            Copyright © 2023
            <a href="http://www.bt.cn/" title="宝塔面板">宝塔面板</a>
            | 让运维安全高效（www.bt.cn）广东堡塔安全技术有限公司 ©
            版权所有宝塔官网正在使用宝塔Linux面板维护管理并由
            <a href="#" target="_blank">尊云云服务器</a>
            提供支持
          </p>

          <div class="last">
            <a href="#" target="_blank">
              违法网站请勿向我司工作人员发起任何形式的人工服务请求，严禁使用宝塔面板从事任何非法活动
            </a>
            |
            <a href="#" target="_blank">违规信息举报入口</a>
            |
            <a href="#" target="_blank">中国互联网举报中心</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "../../../utils/scss/global.scss";

@include mobile {
  #footer {
    padding-top: 25px;

    .footerContent {
      width: 100%;
      padding: 0 15px;

      .top {
        flex-wrap: wrap;

        .imgBox {
          width: 100%;
          display: flex;
          justify-content: center;

          img {
            width: 100px;
          }
        }

        .qr {
          width: 100%;
          margin-top: 15px;

          p {
            font-size: 14px;
            line-height: 27px;
          }
        }

        .item {
          max-width: 33.33%;
          text-align: center;
          margin-top: 15px;

          h3 {
            font-weight: bold;
            font-size: 14px;
            line-height: 27px;
          }

          p {
            font-size: 12px;
            line-height: 22px;
            // margin-top: 5px;
            margin-bottom: 0;
            white-space: nowrap;
          }
        }
      }

      .bot {
        .group {

          p,
          a {
            font-size: 12px;
          }
        }

        .links {
          a {
            white-space: nowrap;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.footer {
  background: url(/index/footer.jpg) no-repeat bottom center #e7f0e9;
  padding: 80px 0 30px 0;

  .footerContent {
    width: $center;
    margin: 0 auto;

    .top {
      display: flex;
      justify-content: space-between;

      &>img {
        width: 158px;
        height: 160px;
      }

      .qr {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
          font-size: 16px;
          line-height: 30px;
        }

        img {
          width: 120px;
        }
      }

      .item {
        .showQr {
          position: relative;

          &:hover {
            img {
              display: block;
            }
          }

          img {
            display: none;
            width: 120px;
            height: 120px;
            position: absolute;
            top: 50%;
            left: 170px;
            box-shadow: 0 0 1px 2px #fefefe;
            margin-top: -60px;
          }
        }

        h3 {
          font-size: 20px;
          line-height: 35px;
          margin-bottom: 10px;
        }

        p {
          color: #666;
          font-size: 16px;
          line-height: 30px;
        }
      }
    }

    .bot {
      margin-top: 60px;

      a {
        transition: all 0.25s;
      }

      a:hover {
        color: #20a53a !important;
      }

      .copyright {
        font-size: 14px;
        color: #777;
        text-align: center;
        line-height: 24px;

        a {
          font-size: 14px;
          color: #777;
        }
      }

      .last {
        line-height: 24px;
        font-size: 14px;
        text-align: center;
        margin-top: 10px;

        a {
          font-size: 14px;
        }
      }

      .links {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        margin-bottom: 15px;

        i {
          width: 14px;
          line-height: 24px;
          text-align: center;
        }

        i,
        a {
          font-size: 14px;
          font-style: normal;
        }

        a {
          text-decoration: none;
          color: #333;

          img {
            width: 48px;
          }
        }

        a:last-child {
          font-size: 0;
        }
      }
    }
  }
}
</style>
